<template>
  <div class="brand-box" ref="brandBoxRef">
    <div class="brand-list">
      <div class="btn-left btn" @click="scrollMove('left')"></div>
      <div class="btn-right btn" @click="scrollMove('right')"></div>
      <el-scrollbar ref="scrollbarRef">
        <div class="brand-display" ref="brandRef">
          <div
            v-for="(item, index) of brandList"
            :key="index"
            :class="['brand-item', flag === index ? 'active' : '']"
            @click="selectItem(item, index)"
          >
            <el-avatar :src="item.brandLogo" :size="100" />
            <el-tooltip placement="top" :content="item.brandName">
              <p class="brand-name">{{ item.brandName }}</p>
            </el-tooltip>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <p class="brand-title">品牌展示</p>
    <div class="ewm-box" v-if="brandEwm">
      <img :src="brandEwm" alt="" />
      <p>{{brandDetail.brandName}}二维码</p>
    </div>
    <div class="brand-content" v-if="isShowDetail">
      <div class="item">
        <div class="item-title">品牌名：</div>
        <div class="item-content">{{brandDetail.brandName}}</div>
      </div>
      <div class="item">
        <div class="item-title">一级品类：</div>
        <div class="category-item" v-for="(item, index) of categoryList" :key="index">
          {{item}}
        </div>
      </div>
      <div class="item">
        <div class="item-title">二级品类：</div>
        <div class="category-two-item" v-for="(item, index) of twoCategoryList" :key="index">
          {{item.dictLabel}}: <span class="two-item" v-for="(sItem, inx) of item.childDataVo" :key="inx">{{sItem.dictLabel}}</span>
        </div>
      </div>
      <div class="item">
        <div class="item-title">主营品类：</div>
        <div class="category-item">
          <span>{{mainPush}}</span>
          <span></span>
        </div>
      </div>
      <div class="item">
        <div class="item-title">代理渠道：</div>
        <div class="item-content">
          <div v-for="item of oneAgency" :key="item.dictLabel" class="channels-box">
            <span>{{item.dictLabel}}</span>
            <span v-for="(sItem, index) of item.children" :key="index">
              <div>{{sItem.dictLabel}}</div>
              <span v-for="(part, inx) of sItem.children" :key="inx" class="city-item">
                {{part.dictLabel}}
              </span>
            </span>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item-title">门店渠道：</div>
        <div class="item-content">
          <div v-for="item of oneStore" :key="item.dictLabel" class="channels-box">
            <span>{{item.dictLabel}}</span>
            <span v-for="(sItem, index) of item.children" :key="index">
              <div>{{sItem.dictLabel}}</div>
              <span v-for="(part, inx) of sItem.children" :key="inx" class="city-item">
                {{part.dictLabel}}
              </span>
            </span>
          </div>
        </div>
      </div>
      <div class="item">
        <span class="item-title">品牌介绍：</span>
        <span class="item-content">{{brandDetail.brandDetails}}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import { ElScrollbar } from 'element-plus'
import {dictList, dictListAll} from "@/api/dict";
import {getWeChatQrCode} from "@/api/customerInfo";

const props = defineProps({
  brandInfoVoList: {
    type: Array,
    default: () => []
  },
  companyType: {
    type: String,
    default: ''
  }
})
const flag = ref(-1)
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
const brandRef = ref()
const brandBoxRef = ref()
const leftNumber = ref(0)
const brandList = computed(() => props.brandInfoVoList || [])
const brandDetail = ref<Record<string, any>>({})
const categoryData = ref<Record<string, any>[]>([]);
const categoryList = ref<string[]>([]);
const twoCategoryList = ref<Record<string, any>[]>([]);
const storeChannels = ref<Record<string, any>[]>([]);
const oneStore = ref<Record<string, any>[]>([]);
const agencyChannels = ref<Record<string, any>[]>([]);
const oneAgency = ref<Record<string, any>[]>([]);
const mainPush = ref('');
const isShowDetail = computed(() => JSON.stringify(brandDetail.value) !== '{}')
const brandEwm = ref<any>(null);


function scrollMove(type: string) {
  if (type === 'right') {
    leftNumber.value++
  } else {
    leftNumber.value--
  }
  scrollbarRef.value!.setScrollLeft(leftNumber.value * 140)
}

function selectItem(item: Record<string, any>, index: number) {
  flag.value = index
  categoryList.value = []
  twoCategoryList.value = []
  brandDetail.value = item

  // 品牌二维码
  getBranQr(brandDetail.value.id)

  const customCategoryVo = item.customCategoryVo || []
  const categoryOne = customCategoryVo.categoryOne ? customCategoryVo.categoryOne.split(',') : []
  const arr = categoryData.value.filter((item: any) => categoryOne.includes(item.dictValue))
  categoryList.value = arr.map((item: any) => item.dictLabel)
  twoCategoryList.value = arr
  mainPush.value = arr.find((sItem: any) => sItem.dictValue === customCategoryVo.mainPush)?.dictLabel || ''

  const channelsInfoVo = item.channelsInfoVo || {}

  // 一级代理渠道
  oneAgency.value = []
  const agencyChannelsOne = channelsInfoVo.agencyChannelsOne ? channelsInfoVo.agencyChannelsOne.split(',') : []
  oneAgency.value = agencyChannels.value.filter((item: any) => agencyChannelsOne.includes(item.dictValue))
  // 二级代理渠道
  const agencyChannelsTwo = channelsInfoVo.agencyChannelsTwo ? channelsInfoVo.agencyChannelsTwo.split(',') : []
  // // 三级代理渠道
  const agencyChannelsThree = channelsInfoVo.agencyChannelsThree ? channelsInfoVo.agencyChannelsThree.split(',') : []
  oneAgency.value.forEach((item: any) => {
    const a = item.sysDictDataVoList.filter((sItem: any) => agencyChannelsTwo.includes(sItem.dictValue))
    item.children = a || []

    item.children.forEach((sItem: any) => {
      const a = sItem.sysDictDataVoList.filter((part: any) => agencyChannelsThree.includes(part.dictValue))
      sItem.children = a
    })
  })

  // 一级门店渠道
  oneStore.value = []
  const storeChannelsOne = channelsInfoVo.storeChannelsOne ? channelsInfoVo.storeChannelsOne.split(',') : []
  oneStore.value = storeChannels.value.filter((item: any) => storeChannelsOne.includes(item.dictValue))
  // 二级门店渠道
  const storeChannelsTwo = channelsInfoVo.storeChannelsTwo ? channelsInfoVo.storeChannelsTwo.split(',') : []
  // // 三级门店渠道
  const storeChannelsThree = channelsInfoVo.storeChannelsThree ? channelsInfoVo.storeChannelsThree.split(',') : []
  oneStore.value.forEach((item: any) => {
    const a = item.sysDictDataVoList.filter((sItem: any) => storeChannelsTwo.includes(sItem.dictValue))
    item.children = a || []

    item.children.forEach((sItem: any) => {
      const a = sItem.sysDictDataVoList.filter((part: any) => storeChannelsThree.includes(part.dictValue))
      sItem.children = a
    })
  })
}

function getBranQr(id: string) {
  brandEwm.value = null
  getWeChatQrCode(id).then((res: any) => {
    brandEwm.value = 'data:image/png;base64,' + res.data
  })
}

watch(() => props.companyType, (val: string) => {
  if (val === '1') {
    // 日化品牌品类
    dictList('daily_category').then((res) => {
      categoryData.value = res.rows || [];
    })
  }
  if (val === '2') {
    // 专业品牌品类
    dictList('major_category').then((res) => {
      categoryData.value = res.rows || [];
    })
  }

  dictListAll('store_channels').then((res) => {
    storeChannels.value = res.data || [];
  })

  dictListAll('agency_channels').then((res) => {
    agencyChannels.value = res.data || [];
  })
}, {immediate: true})


defineExpose({brandBoxRef})

defineComponent({name: 'BrandDisplayComp'})
</script>

<style scoped lang="scss">
.brand-box {
  position: relative;
  width: 100%;
  background-color: #fff;

  .brand-list {
    width: 100%;
    padding: 0 70px;
  }

  .brand-title {
    position: relative;
    padding: 0 20px;
    font-weight: 700;
    font-size: 20px;
    color: #2e3244;
  }

  .ewm-box {
    position: absolute;
    top: 160px;
    right: 60px;
    z-index: 999;
    text-align: center;

    img {
      width: 120px;
      height: 120px;
    }
  }

  .brand-content {
    padding: 20px 40px;

    .item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .item-title {
        margin-bottom: 10px;
        color: #000;
        font-weight: 700;
      }

      .item-content {
        color: #2E3244;
      }

      .category-item {
        margin-right: 10px;
        margin-left: 30px;
        color: #2E3244;
      }

      .category-two-item {
        margin-top: 10px;
        margin-left: 30px;

        .two-item {
          margin-right: 10px;
        }
      }
    }
  }

  .channels-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    >span {
      margin-right: 10px;
    }

    .city-item {
      margin-right: 5px;
    }
  }

  .btn {
    width: 40px;
    height: 100%;
    position: absolute;
    top: 80px;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .btn-left {
    left: 10px;
    background: url('../assets/arrow-left.png') no-repeat center;
  }

  .btn-right {
    right: 10px;
    background: url('../assets/arrow-right.png') no-repeat center;
  }
}
.brand-display {
  height: 160px;
  display: flex;
  align-items: center;

  .brand-item {
    position: relative;
    margin-right: 40px;
    cursor: pointer;

    &:before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
    }

    .brand-name {
      width: 36px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-line-clamp: 2;  // 控制多行的行数
      -webkit-box-orient: vertical;
    }

    &.active:before {
      display: none;
    }
  }
}
</style>
